<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>用户列表</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <table id="userList" lay-filter="userList"></table>
</div>


</body>
<script type="text/html" id="barUser">
    <a class="layui-btn layui-btn-xs" lay-event="disable">停用/启用</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/static/layui/layui.all.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // <![CDATA[
    var ctxPath = /*[[@{/}]]*/ '';
    layui.use('table', function(){
        var table = layui.table,$ = layui.$;

        table.render({
            elem: '#userList',

            page: true, //开启分页
            url: ctxPath + 'user/pageList',
            cols: [[ //表头
                {type:'numbers',fixed: 'left'},
                {type: 'checkbox',fixed: 'left'},
                {field: 'username',align:'center', title: '用户名称',fixed: 'left'},
                {field: 'enable',align:'center', title: '使用状态'},
                {field: 'createTime',align:'center', title: '注册日期', sort: true},
                {fixed: 'right',align:'center', toolbar: '#barUser'}
            ]]
        });

        //监听工具条
        table.on('tool(userList)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    title: '用户信息查看',
                    type: 2,
                    area: ['500px', '600px'],
                    content: ctxPath + 'user/toView/' + data.id,
                    end:function(){
                        table.reload('userList');
                    }
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(){
                    obj.del();
                    layui.$.ajax({
                        type: "delete",
                        url: ctxPath + "user/delete/" + data.id,
                        success:function(data){
                            if(data.status){
                                table.reload('userList');
                                layer.msg('删除成功!');
                            }else{
                                layer.msg(data.message);
                            }
                        }
                    });
                });
            } else if(obj.event === 'disable'){
                $.ajax({
                    url: ctxPath + 'user/disable',
                    type:'post',
                    data:'id=' + data.id,
                    success: function (data) {
                        if(data.status){
                            table.reload('userList');
                            layer.msg('修改成功!');
                        }else{
                            layer.msg(data.message);
                        }
                    }
                });

            }
        });

    });

    // ]]>

</script>
</html>